<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp" %>
<%@page import="java.util.*,com.wits.qso.entity.Student"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%	

	List<Student> students=(List<Student>)request.getAttribute("students");
	List<Student> selectedStudents=(List<Student>)request.getAttribute("selectedStudents");
	
	Set<String> cacheIdList=(Set<String>)request.getAttribute("idList");
	
	int size=0;
	int selectedSize=0;
	int column=7;
	
	if(students!=null){
		size=students.size();
	}
	
	if(selectedStudents!=null){
		selectedSize=selectedStudents.size();
	}
	int rows=size%column==0?size/column:size/column+1;
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>指定学生</title> 
    <link href="${ctx}/static/ligerui/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/ligerui/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />

    <script src="${ctx}/static/ligerui/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/ligerui/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>  
    <link href="${ctx}/static/ligerui/lib/css/common.css" rel="stylesheet" type="text/css" />  
	<link href="${ctx}/static/css/monitor/css/main.css" rel="stylesheet" type="text/css" />

    <script src="${ctx}/static/js/common.js" type="text/javascript"></script>
    <script src="${ctx}/static/ligerui/lib/js/LG.js" type="text/javascript"></script>
    <style type="text/css" >
    	.leftSelectedSpan{
    		color: red;
    	}
    </style>
  	<script type="text/javascript">
  		//选择
  		function select(stuUserId){
  			//左边的添加选中样式
  			$("#noSelectedSpan_"+stuUserId).removeClass().addClass("leftSelectedSpan");
  			//左边的删除选择图片
  			$("#noSelectedImg_"+stuUserId).hide();
  			//右边添加一行
  			var stuName=$("#noSelectedSpan_"+stuUserId).text();
  			$("#rightSelectedTable").append('<tr id="rightSelectedTr_'+stuUserId+'"><td><input type="hidden" name="hidden_selected" value="'+stuUserId+'"/><img onclick="deSelect(\''+stuUserId+'\')" src="${ctx}/static/css/monitor/img/minus_icon.png" style="vertical-align:middle;" /><span id="selectedSpan_'+stuUserId+'">'+stuName+'</span></td>');

  		}
  		
  		//取消选择
  		function deSelect(stuUserId){
  			//删除右边选中的元素
  			$("#rightSelectedTr_"+stuUserId).remove();
  			//删除左边选中状态的样式
  			$("#noSelectedSpan_"+stuUserId).removeClass();
  			//左边增加 选择图片
  			if($("#noSelectedImg_"+stuUserId).length>0){
  				$("#noSelectedImg_"+stuUserId).show();
  			}else{
  				$("#noSelectedSpan_"+stuUserId).
  	  			prepend('<input type="hidden" name="hidden_deleted" value="'+stuUserId+'"/><img id="noSelectedImg_'+stuUserId+'" src="${ctx}/static/css/monitor/img/plus_icon.png" style="vertical-align:middle;" onclick="select(\''+stuUserId+'\')"/>');
  			}
  		}
  		
  		function submit(){
  			var selectArray=[];
  			var deSelectArray=[];
  		  	$('input[name="hidden_selected"]').each(function(){    
  		  	     selectArray.push($(this).val());    
  			}); 
  		  	
  		  	$('input[name="hidden_deleted"]').each(function(){    
  		  		deSelectArray.push($(this).val());    
 			}); 
  		  
//  		  	alert("select: "+selectArray.join());
//  			alert("deSelect: "+deSelectArray.join());
        	LG.ajax({
        		url:"${ctx}/qso/instruct/doSelectStu",
        		data:{groupId:$("#groupId").val(),selectIds:selectArray.join(),deSelectIds:deSelectArray.join()},
        		success:function(result){
        			if(result.success){
        				window.parent.selectStuBack();
        	  			$(window.parent.document).find("#ViewerX").show();
        	  			window.parent.dialogStu.close();        				
        			}

        		}
        	});
  		}
  		
  		function cancel(){
  			$(window.parent.document).find("#ViewerX").show();
  			window.parent.dialogStu.close();
  		}
  	</script>
</head>
<body style="padding:10px; overflow:auto; text-align:center;background:#FFFFFF;"> 
<input type="hidden" id="groupId" value="${groupId}"/>

<table class="monitor-selection">
	<tr>
		<th style="width:75%"><img src="${ctx}/static/css/monitor/img/candidate_icon.png" style="vertical-align:middle;" /> 共 <%=size %>人</th>
		<th style="width:25%"><img src="${ctx}/static/css/monitor/img/checked_icon.png" style="vertical-align:middle;" /> 已选 <%=selectedSize %>人</th>
	</tr>
	<tr>
		<td>
			<table class="monitor-selection-inner">
			<%if(size>0) {
				int index=0;
			%>
				<%
					for( int i=0;i<rows;i++){
				%>
				<tr style="width:98%">
					<%
					Student stu=null;
						for(int j=0;j<column;j++){
							index=i*column+j;
							stu=null;
							if(index<size){
								stu=students.get(index);
							}
					%>
					
					<%
						if(stu!=null){
					%>
						<td id="noSelectedTd_<%=stu.getStuUserId()%>">
						<%if(cacheIdList==null || !cacheIdList.contains(stu.getStuUserId())){ %>
							<img id="noSelectedImg_<%=stu.getStuUserId()%>" src="${ctx}/static/css/monitor/img/plus_icon.png" style="vertical-align:middle;" onclick="select('<%=stu.getStuUserId()%>')"/>
							<span id="noSelectedSpan_<%=stu.getStuUserId()%>"><%=stu.getStuName()%></span>
						<%}else{%>
							<span id="noSelectedSpan_<%=stu.getStuUserId()%>" class="leftSelectedSpan"><%=stu.getStuName()%></span>
						<%} %>
						</td>
					<%}else{ %>
						<td>&nbsp;</td>
					<%} %>
					<%} %>
				</tr>
				<%} %>
			<%} %>									
			</table>
		</td>

		<td>
			<table class="monitor-selection-inner" id="rightSelectedTable">
			<%
			for(Student stu :selectedStudents){
				if(cacheIdList.contains(stu.getStuUserId())){
			%>
				<tr id="rightSelectedTr_<%=stu.getStuUserId()%>">
					<td>
						<img onclick="deSelect('<%=stu.getStuUserId()%>')" src="${ctx}/static/css/monitor/img/minus_icon.png" style="vertical-align:middle;" />
						<span id="selectedSpan_<%=stu.getStuUserId()%>"><%=stu.getStuName()%></span>
					</td>
				</tr>
			<%}%>

			<%} %>	
			</table>		
		</td>
		
	</tr>
</table>

<div style="float:right; margin-right:20px; margin-top:10px;">	
	<div style="width:60px" class="button button2" onclick="cancel()">
		<div class="button-l"> </div>
		<div class="button-r"> </div> 
		<div class="button-icon"><img src="${ctx}/static/css/monitor/img/cancel_icon.png" style="vertical-align:middle;" /> </div>
		<span>取消</span>
	</div>
</div>	

<div style="float:right; margin-right:20px; margin-top:10px;">
	<div style="width:60px" class="button button2" onclick="submit()">
		<div class="button-l"> </div>
		<div class="button-r"> </div> 
		<div class="button-icon"><img src="${ctx}/static/css/monitor/img/arrow_icon.png" style="vertical-align:middle;" /> </div>
		<span>确定</span>
	</div>
</div>
</body>
</html>